<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;

  }
  .grid-container div {
    border: 1px solid black;
    padding: 10px;
  }

  .flex-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-right: 10px;
  }

  .flex-container div {
    width: 120px;  /* 设置宽度为200像素 */
    height: 100px; /* 设置高度为100像素 */
  }
</style>

<script>
  let canvasIds = new Map();
  let index = 1;
  function changePosition() {
    let videoPane = document.getElementById('videoPane');
    videoPane.style.paddingTop = '200px';
  }

  function addChild() {
    let videoPane = document.getElementById('videoPane');
    // let div = document.createElement('div');
    let canvas = document.createElement("canvas");

    let id = 'canvas_' + (++index);
    canvas.id = id;
    canvasIds.set(id, canvas);

    canvas.width = 100;
    canvas.height = 100;
    const context = canvas.getContext('2d');

    context.fillStyle = "#ff0000";
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.font = "36px Verdana";
    context.fillStyle = "#000000";
    context.fillText(id, 10, 50);

    // div.appendChild(canvas);
    videoPane.appendChild(canvas);
    console.info('append child:', canvas);
  }

  function removeChild33() {
    let id = 'canvas_2';
    if (id) {
      console.info('remove child:', id);
      let videoPane = document.getElementById('videoPane');
      let canvas = document.getElementById(id);
      videoPane.removeChild(canvas);
    }
  }

  function floatPane() {

  }
</script>
</head>
<body>
  <div class="grid-container">
    <div>Item 1</div>
    <div>Item 2 2</div>
    <div>Item 3 3</div>
    <div>Item 4 4</div>
    <div>Item 5 5</div>
    <div>Item 6 6</div>
  </div>

  <div class="grid-container">
    <div>qwrewqrqw</div>
  </div>


  <div class="flex-container" id="videoPane">

  </div>

  <div class="flex-container">
    <ul>
      <li><button onclick="changePosition()">changePosition</button> </li>
      <li><button onclick="addChild()">addChild</button> </li>
      <li><button onclick="removeChild33()">removeChild</button> </li>
      <li><button onclick="floatPane()">removeChild</button> </li>
    </ul>
  </div>

</body>
</html>